<template>
  <div class="EditPublish">
    <nav-bar class="navBar">
        <div class="back" slot="left" @click="Back"><img src="@/assets/img/publish/back.svg" alt=""></div>
        <div class="publish" slot="right" @click="handlepublish"><button>发布</button></div>
    </nav-bar>
    <div class="mainEdit">
        <div class="article"><input type="text" placeholder="标题(不超过20字)" oninput="if(value.length > 20)value = value.slice(0, 20)" v-model="article"></div>
        <div class="content"><textarea type="text" placeholder="这一刻的想法..." v-model="content"></textarea></div> 
        <el-upload
          :limit="4"
          action="#"
          list-type="picture-card"
          :http-request="handelUpload" 
          style="width: 90%; margin: 0 auto;">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}" >
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <!-- <div class="showAddress">
            <img src="@/assets/img/publish/address.svg" alt="">
            <div>显示打卡地</div>
            <img class="next" src="@/assets/img/publish/next.svg" alt="">
        </div>
        <div class="showRoute">
            <img src="@/assets/img/publish/route.svg" alt="">
            <div>选择路线</div>
            <img class="next" src="@/assets/img/publish/next.svg" alt="">
        </div>
        <div class="showLabel">
            <img src="@/assets/img/publish/label.svg" alt="">
            <div>选择标签</div>
            <img class="next" src="@/assets/img/publish/next.svg" alt="">
        </div> -->
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar.vue'
import { mapMutations, mapState } from 'vuex'
import {publishBlog,publishBlogImage} from '@/network/publish'
export default {
    name: 'EditPublish',
    data() {
        return {
          content:'',
          article:'',
          user:{},
          dialogImageUrl: '',
          dialogVisible: false,
          disabled: false,
          imageArr: [],
        }
    },
    computed: {
        ...mapState(['selectedData'])
    },
    components:{
        NavBar
    },
    mounted() {
        this.user = JSON.parse(localStorage.user)
    },
    methods: {
        ...mapMutations(['HANDLER_PUBLISH_Data']),
        Back() {
            this.$router.push('/find/recommendation')
        },
        handlerSelectShare(){
            this.$router.push('/selectShare')
        },
        publish(){
            this.$router.push('/find/recommendation')
        },
        handleRemove(file) {
          console.log(file);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        handleDownload(file) {
          console.log(file);
        },
        async handelUpload(params){
          const {data:{data:res}} = await publishBlogImage(params.file)
          this.imageArr.push(res)
        },
        async handlepublish(){
          if(this.article === '' && this.content === '' && this.imageArr.length === 0) alert('发布内容不能为空！')
          else{
            const userId = JSON.parse(localStorage.user).id
            await publishBlog(userId,this.content,this.article,this.imageArr,2 )
            this.$message({
              type: 'success',
              message: '发布成功!'
            });
            this.$router.replace('/find/tourCircle')}
        }
        /* async handleChange(file,fileList){
          console.log(file,fileList);
          let formData = new FormData();
          formData.append('files',file);
          console.log(formData);
          const res = await publishBlogImage(formData)
          console.log(res);
          this.imageStr = res
        } */
    },

}
</script>

<style scoped>
.EditPublish {
    height: 100vh;
    background-color: #fff;
}
/* 返回按钮样式 */
.back {
    text-align: left;
}
.back img {
    height: 30px;
    margin: 5px;
}
/* 发布按钮样式 */
.publish button{
    margin: 10px;
    padding: 7px;
    color: #fff;
    background-color: #05def1;
    border: none;
    border-radius: 5px;
}
/* 文章内容输入框的样式 */
.content {
    padding-left: 20px;
    padding-top: 10px;
}
.content textarea {
    height: 80px;
    width: 95%;
    border: none;
    outline: none;
    caret-color:#05def1;
    padding: 5px;
}
/* 文章标题样式 */
.article {
    padding-left: 20px;
    position: relative;
}
.article input {
    width: 95%;
    border: none;
    outline: none;
    caret-color:#05def1;
    padding: 5px;
}
.article::after {
    position: absolute;
    bottom: 0;
    left: 5%;
    height: 2px;
    width: 90%;
    content: '';
    background-color: #05ddf165;
}
/* 选择的图片样式 */
.showSelected {
    padding-left: 20px;
    padding-right: 20px;
}
.selected {
    width: 33%;
    height: 90px;
    float: left;
    justify-content: center;   
    align-items: center;
    overflow: hidden;
    border: 3px solid #fff;
}
.selected img {
    height: 100%;
    widows: 100%;
}
.addSelected {
    position: relative;
    width: 33%;
    height: 90px;
    float: left;
    background-color: #eeeeee;
    border: 3px solid #fff;
}
.addSelected img {
    width: 40%;
    position: absolute;
    transform: translate( -50%, -50%);
    top: 50%;
    left: 50%;
}
/* 打卡地样式 */
.mainEdit {
    position: relative;
}
.showAddress {
    display: flex;
    text-align: center;
    height: 50px;
    width: 90%;
    position: absolute;
    top: 600px;
    margin-left: 20px;
    border-top: 1px solid #eeececc7;
    border-bottom: 1px solid #eeececc7;
}
.showAddress img {
    height: 60%;
    margin-top: 10px;
}
.showAddress div {
    padding: 15px;
}
.next {
    padding: 5px;
    position: absolute;
    right: 0;
}
/* 选择路线样式 */
.showRoute {
    display: flex;
    text-align: center;
    height: 50px;
    width: 90%;
    position: absolute;
    top: 650px;
    margin-left: 20px;
    border-bottom: 1px solid #eeececc7;
}
.showRoute img {
    height: 60%;
    margin-top: 10px;
}
.showRoute div {
    padding: 15px;
}
/* 分类标签样式 */
.showLabel {
    display: flex;
    text-align: center;
    height: 50px;
    width: 90%;
    position: absolute;
    top: 700px;
    margin-left: 20px;
    border-bottom: 1px solid #eeececc7;
}
.showLabel img {
    height: 60%;
    margin-top: 10px;
}
.showLabel div {
    padding: 15px;
}
</style>